<template>
    <div>
        <div>
                <input type="text" v-model="info.name" />
        </div>
        <table class="table table-bordered">
           <tbody> 
            <tr>
                <td>名称</td>
                <td>编号</td>
                <td>手机号</td>
                <td>规则</td>
                <td>状态</td>
                <td>介绍</td>
                <td>角色</td>
                <td>操作</td>
            </tr>

             <tr v-for="item in data.list":key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.eid }}</td>
                <td>{{ item.phone }}</td>
                <td>{{ item.role }}</td>
                <td>{{ item.status }}</td>
                <td>{{ item.intro }}</td>
                <td>{{ item.rid }}</td>
                <td>操作</td>
            </tr>
        </tbody>
        <span>共{{data.totalCount }}页</span>
        <span>每页{{data.totalPage }}条</span>
        <span>当前{{ info.pageindex }}/{{ data.totalPage }}页</span>
        
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageindex-1)">
        <input type="button" :value="item" v-for="item in data.totalPage" @click="gopage(item)">
        <input type="button" value="下一页" @click="gopage(info.pageindex+1)">
        <input type="button" value="尾页" @click="gopage(data.totalPage)">
 


        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
onMounted(()=>{
    Show();
})


let data:any=reactive({
    list:[],
    totalPage:'',
     totalCount:'',
});
let info:any=reactive({
    pageindex:1,
    pagesize:2,
    name:'',
    rid:'-1'
})

let arr:any=ref([2,3,4,5,6])

const gopage=(num:any)=>{
    if(num<1){
        info.pageindex=1;
        return;
    }
    if(num>data.totalPage){
        info.pageindex=data.totalPage
        return;
    }

    info.pageindex=num;
    Show();
}

const Show=()=>{
    axios({
        url:'https://localhost:7017/api/Hotel/Getem',
        method:'get',
        params:info
    })
    .then((res)=>{
        Object.assign(data,res.data)
    });
}
</script>

<style scoped>
span{
    margin:0 10px;
}
</style>